<!--滚动加载-->
<template>
  <el-scrollbar ref="scrollbar" v-if="initScroll">
    <div
      class="infinite-list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="true"
      infinite-scroll-distance="100"
    >
      <slot name="list" :list="nodeList">
        <slot v-for="node in nodeList" :node="node" :data="node.data"></slot>
      </slot>
      <slot name="loading" v-if="pageTip.loading">
        <p class="infinite-list__loading">加载中...</p>
      </slot>
      <slot name="noMore" v-if="pageTip.noMore">
        <p class="infinite-list__no-more">没有更多了</p>
      </slot>
      <slot name="empty" v-if="pageTip.empty">
        <no-record class="infinite-list__empty"></no-record>
      </slot>
    </div>
  </el-scrollbar>
</template>

<script>
import request from '@/utils/request';
import { generateKey } from '@/utils/data-utils';
import qs from 'qs';

export default {
  name: 'infinite-scroll',
  props: {
    // 查询条件
    searchCondition: {
      type: Object,
      default() {
        return {};
      }
    },
    // 排序
    sorts: {
      type: Array,
      default() {
        return [];
      }
    },
    pageSize: {
      type: Number,
      default: 10
    },
    immediateLoad: {
      type: Boolean,
      default: false
    },
    // 第一项被选中
    activeFirst: Boolean,
    url: {
      type: String,
      default: '',
      require: true
    }
  },
  data() {
    return {
      // 用于初始化组件
      initScroll: false,
      loading: false,
      noMore: false,
      error: false,
      nodeList: [],
      pageNum: -1,
      searchMap: {}
    };
  },
  computed: {
    pageTip() {
      const pageTip = { loading: false, noMore: false, empty: false };
      if (this.loading) {
        pageTip.loading = true;
      } else if (this.nodeList.length <= 0) {
        pageTip.empty = true;
      } else if (this.noMore) {
        pageTip.noMore = true;
      }
      return pageTip;
    },
    disabled() {
      return this.loading || this.noMore || this.error;
    }
  },
  methods: {
    // 页面初始化，当搜索条件改变时，需要重新调用这个方法
    init(search) {
      this.initScroll = false;
      this.$nextTick(() => {
        this.pageNum = -1;
        this.loading = false;
        this.noMore = false;
        this.error = false;
        this.nodeList = [];
        this.initScroll = true;
        this.searchMap = search || this.searchCondition;
        if (this.immediateLoad) {
          this.load();
        }
      });
    },
    load() {
      this.loading = true;
      this.pageNum++;
      const condition = {
        ...this.searchMap,
        page: this.pageNum,
        size: this.pageSize
      };
      request({
        url: this.url,
        method: 'POST',
        data: qs.stringify(condition)
      })
        .then(res => {
          const result = res.data;
          result.content.forEach(data => {
            this.nodeList.push({
              key: generateKey(),
              index: this.nodeList.length,
              data
            });
          });
          // 数据全部加载完，就不需要再次加载了
          if (this.nodeList.length >= result.totalElements) {
            this.noMore = true;
          }
          this.loading = false;
          result.pageNum = condition.page;
          this.$emit('load', result.content, this.nodeList);
        })
        .catch(e => {
          console.log('error:', e);
          this.pageNum--;
          this.loading = false;
          this.error = true;
          setTimeout(() => {
            this.error = false;
          }, 1000);
        });
    },
    resize() {
      // 如果没有自动更新，那么需要手动调用这个方法
      this.$nextTick(this.$refs.scrollbar.update);
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.infinite-list {
  &__item {
  }
  &__loading,
  &__no-more {
    text-align: center;
    line-height: 3;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
  }
  &__empty,
  &__error {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
/deep/ .el-scrollbar__bar.is-vertical {
  bottom: 2px;
}
</style>
